<template>
    <div class="content-three">
        <ul >
            <li class="content-list">
                <div class="list-img">
                    <img :src="content2" alt="">
                </div>
                <div class="list-content">
                    <p class="content-title1">多彩青城山</p>
                    <p class="content-title2">COLORFULL QINGCHEN</p>
                    <img class="caidan-select-img" :src="xin" alt="">
                    <span class="view-num">160</span>
                </div>
            </li>
            <li class="content-list">
                <div class="list-img">
                    <img :src="content2" alt="">
                </div>
                <div class="list-content">
                    <p class="content-title1">多彩青城山</p>
                    <p class="content-title2">COLORFULL QINGCHEN</p>
                    <img class="caidan-select-img" :src="xin" alt="">
                    <span class="view-num">160</span>
                </div>
            </li>
            <li class="content-list">
                <div class="list-img">
                    <img :src="content2" alt="">
                </div>
                <div class="list-content">
                    <p class="content-title1">多彩青城山</p>
                    <p class="content-title2">COLORFULL QINGCHEN</p>
                    <img class="caidan-select-img" :src="xin" alt="">
                    <span class="view-num">160</span>
                </div>
            </li>
            <li class="content-list">
                <div class="list-img">
                    <img :src="content2" alt="">
                </div>
                <div class="list-content">
                    <p class="content-title1">多彩青城山</p>
                    <p class="content-title2">COLORFULL QINGCHEN</p>
                    <img class="caidan-select-img" :src="xin" alt="">
                    <span class="view-num">160</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "content-header-three",
        data(){
            return {
                content2:"./static/img/content-2.png",
                xin:"./static/img/xin2.png"
            }
        }
    }
</script>

<style lang="stylus" type="text/stylus" scoped>
    .content-three

        height:8.58rem
        width:9.36rem
        margin :0 auto
        .content-list
         float:left
         height:4.2rem
         width:49%
         margin :0 0.5%

         .list-img
          height:3.4rem
          width :100%

          img
            width :100%
            border-radius: .1rem
         .list-content
             position :relative
           .caidan-select-img
                position : absolute
                width :.4rem
                top:-0.05rem
                right :.1rem

           .view-num
               position : absolute
               width :.1rem
               top:0.28rem
               font-size :.01rem
               color:#25a4bb
               right :.43rem
           .content-title1
                margin:.1rem 0
                line-height :.2rem
                font-size:.22rem
                font-family:"微软雅黑 Light"
                color:#000
           .content-title2
                 line-height :.5rem
                 font-size:.28rem
                 font-family:"微软雅黑 Light"
                 color:#000
                 margin: 0
</style>